<template>
  <div class="overflow-y-scroll" ref="boxRef">
    <div ref="listenDomRef" v-for="(i, index) in 10" :class="`box-${index}`" class="h-36 my-2 p-2 bg-slate-300">
      {{ index }}
    </div>

    <div class="absolute bottom-12 w-96 left-1/2 -translate-x-1/2 bg-white py-2 px-6 rounded shadow-md">
      当前窗口内：
      <transition-group name="fade">
        <span v-for="i in inView" :key="i">{{ i }}、</span>
      </transition-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
const listenDomRef = ref()
const boxRef = ref()

const { inView, activeIndex } = useViewObServer({
  selectors: listenDomRef,
  whoIsActive: 'first',
  onEnter(n) {
    Message.success({
      id: '进入Message',
      content: `第${n}个进入了`,
    })
  },
  onLeave(n) {
    Message.error({
      id: '退出Message',
      content: `第${n}个离开了`,
    })
  },
})
</script>
